【LINEミニアプリ】クイック入力機能で会員登録がもっと簡単になりました！

npm install @line/liff-common-profile-plugin

import liff from "@line/liff"
import { LiffCommonProfilePlugin } from "@line/liff-common-profile-plugin";
liff.use(new LiffCommonProfilePlugin());

 const profile = await liff.commonProfile.get(
      ['family-name', 'given-name', 'family-name-kana', 'given-name-kana']
    )

// 取得したいユーザー情報のkey配列
const profileKeys = [
  'family-name',
  'given-name',
  'family-name-kana',
  'given-name-kana',
  'sex-enum',
  'bday-day',
  'bday-month',
  'bday-year',
  'tel',
  'postal-code',
  'address-level1',
  'address-level2',
  'address-level3',
  'address-level4',
] as Array<keyof CommonProfile>

// Account Centerからユーザー情報を取得する
const getProfileFromAccountCenter =
  async (): Promise<Partial<CommonProfile> | null> => {
    if (process.env.NODE_ENV === 'development') {
      // 開発環境ではダミーデータを返す。
      return await liff.$commonProfile.getDummy(profileKeys, 1)
    } else {
      return await liff.$commonProfile.get(profileKeys)
    }
  }

// ...省略
import liff from '@line/liff'
import {
  CommonProfile,
  LiffCommonProfilePlugin,
} from '@line/liff-common-profile-plugin'

liff.use(new LiffCommonProfilePlugin())

export function SignUpForm({ ...省略 }: SignUpFormProps) {
  const formik = useFormik<SignUpFormValues>({
    initialValues: defaultInitialValues,
    onSubmit: handleSubmit,
    validate: validateSignUpForm,
  })

// ...省略

+const setValuesToForm = () => {
+   getProfileFromAccountCenter().then((profile) => {
+     if (!profile) return
+
+     // formikに値をセットする
+     formik.setValues({
+       ...formik.values,
+       lastName: profile['family-name'] || '',
+       firstName: profile['given-name'] || '',
+       lastNameKana: profile['family-name-kana'] || '',
+       firstNameKana: profile['given-name-kana'] || '',
+       gender: convertToFormGender(profile['sex-enum']),
+       birthday: createDateStringFromAccountCenter({
+         bdayDay: profile['bday-day'],
+         bdayMonth: profile['bday-month'],
+         bdayYear: profile['bday-year'],
+       }),
+       phone: profile['tel'] ? formatPhoneNumber(profile['tel']) : '',
+       postalCode: profile['postal-code'] || '',
+       prefecture: profile['address-level1'] || '',
+       city: profile['address-level2'] || '',
+       street: profile['address-level3'] || '',
+       apartment: profile['address-level4'] || '',
+     })
+   })
+ }

  useEffect(() => {
+ // 画面を開いた際にクイック入力が実行されるようにする
+    setValuesToForm()
  }, [])

  return (
    <>
      <Panel>
+       <button onClick={setValuesToForm} style={styles.wrapper}>  // ボタンを押して再実行できるようにする
+         <img
+           style={{
+             width: '256px',
+             height: '65px',
+           }}
+           src="/images/account-center-black-with-description.png"
+           alt="アカウントセンターボタン"
+         />
+      </button>
       {/* ...省略 */}
        <form onSubmit={formik.handleSubmit} style={styles.wrapper}>
          <Field label="氏名 (姓)" error={formik.errors.lastName} required>
            <InputText
              name="lastName"
              value={formik.values.lastName}
              required
              onChange={formik.handleChange}
            />
          </Field>
        {/* ...省略 */}
        </form>
      </Panel>
    </>
  )
}

export function convertToFormGender(sexEnum: number | undefined): GenderT {
  switch (sexEnmu) {
    case 0:
      return 'male'
    case 1:
      return 'female'
    case 2 || 3:
      return 'other'
    default:
      return 'other'
  }
}

// セットする際に値を変換する
formik.setValues({
  // ...省略
  gender: convertToFormGender(profile['sex-enum']),
  })